<template>
  <div class="orders-management">
    <div class="page-header">
      <h2>订单管理</h2>
      <el-select v-model="statusFilter" placeholder="订单状态">
        <el-option label="全部订单" value="all" />
        <el-option label="待发货" value="notShipped" />
        <el-option label="已发货" value="shipped" />
        <el-option label="已完成" value="completed" />
      </el-select>
    </div>

    <el-table :data="filteredOrders" style="width: 100%">
      <el-table-column prop="orderNumber" label="订单号" width="120" />
      <el-table-column label="商品信息">
        <template #default="scope">
          <div class="product-info">
            <el-image 
              :src="scope.row.product.image" 
              style="width: 50px; height: 50px"
            />
            <div>
              <div>{{ scope.row.product.name }}</div>
              <div class="price">¥{{ scope.row.product.price }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量" width="100" />
      <el-table-column prop="orderDate" label="下单时间" width="150" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button 
            size="small" 
            :type="scope.row.status === 'notShipped' ? 'primary' : 'info'"
            :disabled="scope.row.status !== 'notShipped'"
            @click="shipOrder(scope.row)"
          >
            发货
          </el-button>
          <el-button 
            size="small"
            @click="viewOrderDetails(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      v-model="detailsVisible"
      width="50%"
    >
      <div v-if="selectedOrder">
        <div class="order-details">
          <p><strong>订单号：</strong>{{ selectedOrder.orderNumber }}</p>
          <p><strong>下单时间：</strong>{{ selectedOrder.orderDate }}</p>
          <p><strong>商品名称：</strong>{{ selectedOrder.product.name }}</p>
          <p><strong>购买数量：</strong>{{ selectedOrder.quantity }}</p>
          <p><strong>订单状态：</strong>{{ getStatusText(selectedOrder.status) }}</p>
          <p><strong>订单金额：</strong>¥{{ selectedOrder.product.price * selectedOrder.quantity }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useOrderStore } from '@/stores/orderStore';
import { ElMessage } from 'element-plus';

const orderStore = useOrderStore();
const statusFilter = ref('all');
const detailsVisible = ref(false);
const selectedOrder = ref(null);

onMounted(() => {
  orderStore.fetchOrders();
});

const filteredOrders = computed(() => {
  return orderStore.getFilteredOrders(statusFilter.value);
});

const getStatusType = (status) => {
  const types = {
    notShipped: 'warning',
    shipped: 'primary',
    completed: 'success'
  };
  return types[status] || 'info';
};

const getStatusText = (status) => {
  const texts = {
    notShipped: '待发货',
    shipped: '已发货',
    completed: '已完成'
  };
  return texts[status] || status;
};

const shipOrder = (order) => {
  const updatedOrder = {
    ...order,
    status: 'shipped'
  };
  orderStore.updateOrder(updatedOrder);
  ElMessage.success('发货成功');
};

const viewOrderDetails = (order) => {
  selectedOrder.value = order;
  detailsVisible.value = true;
};
</script>

<style scoped>
.orders-management {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  color: #2c3e50;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price {
  color: #ff6b6b;
  font-weight: bold;
}

.order-details {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.order-details p {
  margin: 10px 0;
}
</style>